<template>
    <div style="width: 100%;height: 100%">
      <div class="until_title">智慧监控</div>
      <div class="company_subTitle">
        <i class="iconfont icon-shebeijiankong"></i>
        <span>设备监控</span>
      </div>
      <div class="deviceDetail">
        <div class="deviceProcess">
          <div class="processItem">
            <div class="processName">
              设备监控在线率
            </div>
            <div class="processInfo">
              <div class="processContain relative">
                <div class="processMask" v-if="deviceMondata.deviceTotal === 0" :style="{width: `0%`}"></div>
                <div class="processMask" v-else :style="{width: `${((deviceMondata.todayDeviceNum/deviceMondata.deviceTotal)*100).toFixed(0)}%`}"></div>
              </div>
              <div class="processNum">
                <span v-if="deviceMondata.deviceTotal === 0">
                  0%
                </span>
                <span v-else>
                  {{((deviceMondata.todayDeviceNum/deviceMondata.deviceTotal)*100).toFixed(1)}}%
                </span>
              </div>
              <div class="processStaus">
                <i class="iconfont icon-jianyoushang safe" v-if="deviceMondata.deviceTrend > 0"></i>
                <i class="iconfont icon-jianyouxia warning" v-if="deviceMondata.deviceTrend < 0"></i>
              </div>
            </div>
          </div>
          <div class="processItem">
            <div class="processName">
              视频监控在线率
            </div>
            <div class="processInfo">
              <div class="processContain relative videoContainerColor">
                <div class="processMask videoColor" v-if="deviceMondata.videoTotal === 0" :style="{width: `0%`}"></div>
                <div class="processMask videoColor" v-else :style="{width: `${((deviceMondata.todayVideoNum/deviceMondata.videoTotal)*100).toFixed(0)}%`}"></div>
              </div>
              <div class="processNum">
                <span
                  v-if="deviceMondata.videoTotal === 0"
                >
                  0%
                </span>
                <span v-else>
                  {{((deviceMondata.todayVideoNum / deviceMondata.videoTotal)*100).toFixed(1)}}%
                </span>
              </div>
              <div class="processStaus">
                <i class="iconfont icon-jianyoushang safe" v-if="deviceMondata.videoTrend > 0"></i>
                <i class="iconfont icon-jianyouxia warning" v-if="deviceMondata.videoTrend < 0"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="smartMonitorLine"></div>
        <div class="ArrDeviceNum">
          <div class="deviceNum">
            <div class="num">
              {{deviceMondata.alarmCountAvg}}
            </div>
            <div class="rate">
              <i class="iconfont icon-jianyoushang warning" ref="up" v-if="deviceMondata.alarmTrend > 0"></i>
              <i class="iconfont icon-jianyouxia safe" ref="down" v-if="deviceMondata.alarmTrend < 0"></i>
            </div>
          </div>
          <div class="deviceDes" style="letter-spacing: 1px">
            平均每项目<br/>
            <div style="height: 2px"></div>
            设备报警次数
          </div>
        </div>
      </div>
      <div class="company_subTitle">
        <i class="iconfont icon-lubiao-xf"></i>
        <span>今日环境监测</span>
      </div>
      <div class="environmentDetail">
        <cricleChart :type="1" :rateValue="environmentDetail.dustRate" :rateStatus="environmentDetail.dustTrend"></cricleChart>
        <cricleChart :rateValue="environmentDetail.noiseRate" :rateStatus="environmentDetail.noiseTrend"></cricleChart>
      </div>
      <div class="company_subTitle">
        <i class="iconfont icon-zu5" style="font-size: 12px;"></i>
        <span>整体安全问题监控</span>
      </div>
      <div>
        <safeMonitor :riskDtos="riskDtos"></safeMonitor>
      </div>
    </div>
</template>

<script>
    import mixin from './../mixin'
    import { mapGetters } from 'vuex'
    export default {
      name: 'smartMonitor',
      mixins: [mixin],
      data () {
        return {
          deviceMondata: {
            alarmCountAvg: 0,
            alarmTrend: 0,
            todayDeviceNum: 0,
            deviceTrend: 0,
            deviceTotal: 0,
            todayVideoNum: 0,
            videoTotal: 0,
            videoTrend: 0
          },
          riskDtos: [],
          environmentDetail: {
            dustRate: 0,
            dustTrend: 0,
            noiseRate: 0,
            noiseTrend: 0
          }
        }
      },
      computed: {
        ...mapGetters({
          currentUser: 'currentUser'
          // screenSetting: 'getScreenSetting'
        })
      },
      components: {
        cricleChart (reslove) {
          require(['./cricleChart.vue'], reslove)
        },
        safeMonitor (reslove) {
          require(['./safeMonitor.vue'], reslove)
        }
      },
      mounted () {
        this.getDeviceMonitorInfo()
      },
      watch: {
        currentUser () {
          if (this.currentUser.companyAdmin) {
            this.getDeviceMonitorInfo()
          }
        }
      },
      methods: {
        getDeviceMonitorInfo () {
          let data = {
            mid: this.currentUser.mid,
            coId: this.currentUser.coId,
            code: this.currentUser.code
          }
          this.$axios({
            method: 'post',
            url: `${this.$site.videoServer}/api/companyScreen/getDeviceMonitorInfo`,
            data: this.$qs.stringify(data)
          }).then(res => {
            if (res.data.success) {
              let data = res.data.data
              this.deviceMondata.alarmCountAvg = data.alarmCountAvg
              this.deviceMondata.todayDeviceNum = data.todayDeviceNum
              this.deviceMondata.deviceTrend = data.deviceTrend
              this.deviceMondata.deviceTotal = data.deviceTotal || 0
              this.deviceMondata.todayVideoNum = data.todayVideoNum || 0
              this.deviceMondata.videoTrend = data.videoTrend
              this.deviceMondata.videoTotal = data.videoTotal
              this.environmentDetail.dustRate = data.dustRate
              this.environmentDetail.dustTrend = data.dustTrend
              this.environmentDetail.noiseRate = data.noiseRate
              this.environmentDetail.dustTrend = data.dustTrend;
              (data.riskDtos).forEach((item) => {
                item.reportDate = ((this.$moment(item.reportDate).get('month') + 1) < 10 ? `0${(this.$moment(item.reportDate).get('month') + 1)}` : (this.$moment(item.reportDate).get('month') + 1)) + '-' + (this.$moment(item.reportDate).get('date') < 10 ? `0${this.$moment(item.reportDate).get('date')}` : this.$moment(item.reportDate).get('date'))
              })
              this.riskDtos = data.riskDtos
            } else {
              this.$message.error(res.errorMsg)
            }
          })
        }
      }
    }
</script>

<style scoped lang="scss">
    .company_subTitle{
      color: #00E8FF;
      margin-bottom: 15px;
    }
  .deviceDetail {
    padding-left: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    .smartMonitorLine {
      background: url('/static/images/bgy-smartmonitor-line.png') no-repeat;
      width: 2px;
      height: 88px;
      background-size: 100%;
    }
    .deviceProcess{
      .processItem{
        &:nth-child(1){
          .processInfo{
            margin-bottom: 10px;
          }
        }
        .processName{
          font-size:14px;
          font-weight:400;
          color:rgba(169,197,236,1);
          margin-bottom: 5px;
        }
        .processInfo{
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .processContain{
            width: 222px;
            border-radius:8px;
            height: 16px;
            padding: 2px;
            box-sizing: border-box;
            border:1px solid rgba(47,179,255,1);
            &.videoContainerColor{
              border:1px solid #27C666;
            }
            .processMask{
              position: absolute;
              height:10px;
              background:linear-gradient(90deg,rgba(34,109,221,1),rgba(47,179,255,1));
              border-radius:5px;
              max-width: 216px!important;
              &.videoColor{
                background:linear-gradient(90deg,rgba(129,217,64,1),rgba(39,198,102,1));
              }
            }
          }
          .processNum{
            padding: 0 5px;
            color: #00E8FF;
          }
          .processStaus {
            .safe{
              color: #00FF56;
            }
            .warning{
              color: #E74646;
            }
          }
        }
      }
    }
    .ArrDeviceNum {
      padding-top: 10px;
      text-align: center;
      .deviceNum{
        > div {
          display: inline-block;
          &.num {
            font-size:24px;
            font-weight:bold;
            color:rgba(0,232,255,1);
          }
          &.rate {
            vertical-align: top;
            > i {
              display: inline-block;
            }
            .safe{
              color: #00FF56;
            }
            .warning{
              color: #E74646;
            }
          }
        }
      }
      .deviceDes {
        font-weight:400;
        color:rgba(169,197,236,1);
        margin-top: 5px;
      }
    }
  }
</style>
